import { Layout, Button, Flex, Select } from "antd"
import { InstagramOutlined, DiscordOutlined } from "@ant-design/icons"
const { Header } = Layout
import { useMatch } from 'react-router-dom';
import { useLocalStorage } from "@uidotdev/usehooks";

export default function IHeader() {
  const [account, saveAccount] = useLocalStorage("account", "wow1");
  const menus = [
    {path: "/operation", label: "操作", icon: <DiscordOutlined />},
    {path: "/role", label: "角色", icon: <InstagramOutlined />},
    {path: "/analyze", label: "统计", icon: <InstagramOutlined />},
    {path: "/pet-analyze", label: "宠物统计", icon: <InstagramOutlined />},
    {path: "/schedule", label: "定时任务", icon: <InstagramOutlined />},
    {path: "/debug", label: "Debug", icon: <InstagramOutlined />},
  ]
  return (
    <>
      <Flex className="app-header" gap="small" wrap>
        {menus.map(item => {
          return (
            <Button 
              key={item.path} 
              type="link" 
              color="primary" 
              variant={useMatch(item.path) ? "solid" : "filled"} 
              href={item.path}
            >
              {item.label}
            </Button>
          )
        })}
        <Select value={account} onChange={e => {
          saveAccount(e)
          location.reload()
        }}>
          <Select.Option value="wow1">wow1</Select.Option>
          <Select.Option value="wow3">wow3</Select.Option>
          <Select.Option value="wow4">wow4</Select.Option>
        </Select>
      </Flex>
    </>
    
  )
}